<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<html>
<head>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <style>
        .container {
            width: 550px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <div class="navbar-inner-el-wrapper">
            <a class="brand" href="#">GlobalLogic Web Project</a>
            <ul class="nav">
                <li><a href="/home">Home</a></li>
                <li class="active"><a href="/new">New Yacht</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container">
    <form id="demoForm" enctype="multipart/form-data" method="post" action="/new" class="bbq">
        <div id="fieldWrapper">
            <span class="step" id="first">
                <span class="title">New Yacht</span>
                <hr>
                <label for="yacht_name"><strong>* Yacht Name:</strong></label>
                <input type="text" class="input-block-level required" maxlength="20"
                       name="yacht_name" id="yacht_name"
                       placeholder="Yacht name"/><br/>
                <label for="owner"><strong>Owner Name:</strong></label>
                <select class="input-block-level" name="owner" id="owner">
                    <c:forEach items="${owners}" var="owner">
                        <option value="${owner.ownerId}">${owner.name}</option>
                    </c:forEach>
                </select>
                <br>

                <strong>* Classification:</strong><br>
                <div class="radio-group">
                    - by purpose:
                    <div class="radio-group">
                        <label class="radio">
                            <input class="required" type="radio" name="purpose"
                                   value="sport">
                            Sport
                        </label>
                        <label class="radio">
                            <input type="radio" name="purpose" value="cruise">
                            Cruise
                        </label>
                    </div>

                    - by drive:  <i>(*Regattas allows only for Sailing drive.)</i>
                    <div class="radio-group">
                        <label class="radio">
                            <input class="required" type="radio" name="drive"
                                   value="sailing">
                            Sailing
                        </label>
                        <label class="radio">
                            <input type="radio" name="drive"
                                   value="motor-sailing">
                            Motor-sailing
                        </label>
                        <label class="radio">
                            <input type="radio" name="drive" value="motor">
                            Motor
                        </label>
                    </div>

                    - by hull:
                    <div class="radio-group">
                        <label class="radio">
                            <input class="required" type="radio" name="hull"
                                   value="monohull">
                            Monohull
                        </label>
                        <label class="radio">
                            <input type="radio" name="hull" value="catamarans">
                            Catamarans
                        </label>
                        <label class="radio">
                            <input type="radio" name="hull" value="trimarans">
                            Trimarans
                        </label>
                    </div>
                </div>
                <br>
                <i>Fields marked with <b>*</b> are required</i>
            </span>
            <span id="finland" class="step">
                <span class="title">Additional Information</span>
                <hr>
                <strong>Regattas:<i><span id="regattas_title"></span></i></strong><br><br>
                <c:choose>
                    <c:when test="${empty regattas}">
                        Regattas list is empty.
                    </c:when>
                    <c:otherwise>
                        <c:forEach items="${regattas}" var="regatta" varStatus="status">
                            <input type="checkbox" value="${regatta.regattaId}" name="regatta-${status.count}">
                            <span id="regatta_text_${regatta.regattaId}">
                                <i>${regatta.name}</i>, ${regatta.city}, ${regatta.country} (${regatta.regattaDate})
                            </span>
                            <br><br>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
                <strong>Description:</strong><br>
                <textarea name="description" id="description" rows="3"></textarea>
                <input type="text" name="regatta_ids" id="regatta_ids" style="display: none" />
                <br><br>
                <strong>Yacht photo:</strong><br>
                <input type="file" name="photo" id="photo" onchange="changePhoto(this);">
            </span>
            <span id="confirmation" class="step">
                <span class="title">Summary</span>
                <hr>
                <dl class="dl-horizontal">
                    <dt>Yacht Name</dt>
                    <dd id="summary_yacht_name">${yacht.name}</dd>

                    <dt>Owner</dt>
                    <dd id="summary_owner"></dd>

                    <dt>Type</dt>
                    <dd>
                        <span class="label label-success" id="summary_type_purpose">${yacht.purpose}</span>
                        <span class="label label-important" id="summary_type_drive">${yacht.drive}</span>
                        <span class="label label-info" id="summary_type_hull">${yacht.hull}</span>
                    </dd>

                    <dt>Description</dt>
                    <dd id="summary_description">

                    </dd>

                    <br>

                    <dt>Regattas:</dt>
                    <dd id="summary_regattas"></dd>

                    <dt>Photo:</dt>
                    <dd>
                        <img id="upload-photo" src="#" />
                    </dd>
                </dl>

                <br>
                <span id="result"></span>
            </span>
        </div>
        <br>

        <div id="demoNavigation">
            <input class="btn btn-primary" id="back" value="Back" type="reset"/>
            <input class="btn btn-primary" id="next" value="Next"
                   type="submit"/>
        </div>
    </form>
</div>
<!-- /container -->

<script src="/static/jquery.wizard/js/jquery-1.4.2.min.js"></script>
<script src="/static/jquery.wizard/js/jquery.form.js"></script>
<script src="/static/jquery.wizard/js/jquery.validate.js"></script>
<script src="/static/jquery.wizard/js/additional-methods.js"></script>
<script src="/static/jquery.wizard/js/bbq.js"></script>
<script src="/static/jquery.wizard/js/jquery-ui-1.8.5.custom.min.js"></script>
<script src="/static/jquery.wizard/js/jquery.form.wizard.js"></script>
<script src="/static/js/newYacht.js"></script>
</body>
</html>